<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="el-icon-document">处分详情</span>
        <el-button style="float: right" size="mini" type="danger" @click="goBack">关闭</el-button>
        <el-button style="float: right" size="mini" type="success" v-print="printobj">打印</el-button>
      </div>
      <div class="el-container" id="disposal">
        <div class="table-container">
          <h2 style="text-align: center">违纪处分申报</h2>
          <div class="block">
            <!-- 处分表单 -->

            <el-descriptions class="margin-top" title="" :column="2" size="medium" border style="width: 100%">
              <el-descriptions-item>
                <template slot="label"> 学号 </template>
                {{ form.stuNo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 姓名 </template>
                {{ form.stuName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 性别 </template>
                {{ form.gender }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 院部 </template>
                {{ form.departmentName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 年级 </template>
                {{ form.gradeName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 班级 </template>
                {{ form.className }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 民族 </template>
                {{ form.mz }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 出生日期 </template>
                {{ form.birthday }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 籍贯：省/自治区/直辖市 </template>
                {{ form.jg }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 违纪时间 </template>
                {{ form.violationDate }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 处分等级 </template>
                {{ penaltyTypeMethodFormat(form) }}
              </el-descriptions-item>
              <el-descriptions-item span="2">
                <template slot="label"> 违纪材料 </template>
                <Affix v-model="form.evidenceUpload" :disabled="true"></Affix>
              </el-descriptions-item>
              <el-descriptions-item span="2">
                <template slot="label"> 处分建议 </template>
                {{ form.penaltyRecommendation }}
              </el-descriptions-item>
              <el-descriptions-item span="2">
                <template slot="label"> 违规条例 </template>
                {{ form.violationRegulations }}
              </el-descriptions-item>
            </el-descriptions>

          </div>
          <div class="block">
            <el-timeline>
              <el-timeline-item v-for="(item, index) in flowRecordList" :key="index" :icon="setIcon(item.finishTime)" :color="setColor(item.finishTime)">
                <p style="font-weight: 700">{{ item.taskName }}</p>
                <el-card :body-style="{ padding: '10px' }">
                  <el-descriptions class="margin-top" :column="1" size="small" border>
                    <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-user"></i>办理人</template>
                      {{ item.assigneeName }}
                      <el-tag type="info" size="mini">{{ item.deptName }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.candidate" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-user"></i>候选办理</template>
                      {{ item.candidate }}
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="my-label">
                      <template slot="label"><i class="el-icon-date"></i>接收时间</template>
                      {{ item.createTime }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.finishTime" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-date"></i>处理时间</template>
                      {{ item.finishTime }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.duration" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-time"></i>耗时</template>
                      {{ item.duration }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.comment" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
                      {{ item.comment.comment }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.finishTime" label-class-name="my-label">
                      <template slot="label"><i class="el-icon-date"></i>签名</template>
                      <img  :src="baseurl + item.assigneeSign" width="300px" height="200px" class="avatar" />
                    </el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
      <!--流程流转记录-->
      <!--表单信息-->
    </el-card>
  </div>
</template>

<script>
import { flowRecord } from '@/api/flowable/finished'
import Parser from '@/components/parser/Parser'
import { getProcessVariables, flowXmlAndNode } from '@/api/flowable/definition'
import flow from '@/views/flowable/task/finished/detail/flow'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getLeaveApplicationByProcInsId, getStuInfoByStuId } from '@/api/routine/leaveApplication'
import { getDisciplinaryApplicationByProcInsId, getStuInfo } from '@/api/routine/disciplinaryApplication'
import downloadModule from '@/plugins/download.js'

export default {
  name: 'DisciplinaryDetail',
  dicts: ['rt_penalty_type', 'rt_penalty_status'],
  components: {
    Parser,
    flow,
  },
  props: {},
  data() {
    return {
      baseurl: process.env.VUE_APP_BASE_API,
      // 模型xml数据
      flowData: {},
      activeName: '1',
      // 用户表格数据
      userList: null,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      // 查询参数
      queryParams: {
        deptId: undefined,
      },
      // 遮罩层
      loading: true,
      flowRecordList: [], // 流程流转数据
      formConfCopy: {},
      src: null,
      taskForm: {
        multiple: false,
        comment: '', // 意见内容
        procInsId: '', // 流程实例编号
        instanceId: '', // 流程实例编号
        deployId: '', // 流程定义编号
        taskId: '', // 流程任务编号
        procDefId: '', // 流程编号
        vars: '',
        targetKey: '',
      },
      variables: [], // 流程变量数据
      variablesData: {}, // 流程变量数据
      variableOpen: false, // 是否加载流程变量数据
      category: null, // 流程分类
      leaveForm: false, // 请假表单
      disposalForm: false, // 处分表单
      form: {},
      // 学生基础信息
      stuInfo: {},
      //打印
      printobj: {
        id: 'disposal',
        popTitle: '打印', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() {}, // 开启打印前的回调事件
        openCallback() {}, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: '',
      },
      notupload: {
        type: Boolean,
        default: true,
      },
    }
  },
  created() {
    this.taskForm.deployId = this.$route.query && this.$route.query.deployId
    this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId
    this.category = this.$route.query.category
    if (this.category == 'disposal') {
      this.disposalForm = true
      this.getDisciplinaryApplication(this.taskForm.procInsId)
    }
    // 回显流程记录
    // 流程任务重获取变量表单
    //   if (this.taskForm.taskId){
    //     this.processVariables( this.taskForm.taskId)
    //   }

    this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId)
  },
  methods: {
    penaltyTypeMethodFormat(row, column) {
      return this.selectDictLabel(this.dict.type.rt_penalty_type, row.penaltyType)
    },
    getLeaveApplication(procInsId) {
      getLeaveApplicationByProcInsId(procInsId).then((response) => {
        this.form = response.data
        this.getStuInfoByStuId(this.form.stuNo)
      })
    },
    getDisciplinaryApplication(procInsId) {
      getDisciplinaryApplicationByProcInsId(procInsId).then((response) => {
        this.form = response.data
        this.form.penaltyType = this.form.penaltyType.toString()
        this.getStuInfo(this.form.stuNo)
      })
    },
    getStuInfo(stuNo) {
      getStuInfo(stuNo).then((res) => {
        if (res.code == 200) {
          this.stuInfo = res.data
        }
      })
    },
    getStuInfoByStuId(stuNo) {
      getStuInfoByStuId(stuNo).then((res) => {
        if (res.code == 200) {
          this.stuInfo = res.data
        }
      })
    },
    handleClick(tab, event) {
      if (tab.name === '3') {
        flowXmlAndNode({ procInsId: this.taskForm.procInsId, deployId: this.taskForm.deployId }).then((res) => {
          this.flowData = res.data
        })
      }
    },
    setIcon(val) {
      if (val) {
        return 'el-icon-check'
      } else {
        return 'el-icon-time'
      }
    },
    setColor(val) {
      if (val) {
        return '#2bc418'
      } else {
        return '#b3bdbb'
      }
    },
    /** 流程流转记录 */
    getFlowRecordList(procInsId, deployId) {
      const that = this
      const params = { procInsId: procInsId, deployId: deployId }
      flowRecord(params)
        .then((res) => {
          that.flowRecordList = res.data.flowList
        })
        .catch((res) => {
          this.goBack()
        })
    },
    //   /** 获取流程变量内容 */
    //   processVariables(taskId) {
    //     if (taskId) {
    //       // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
    //       getProcessVariables(taskId).then(res => {
    //         this.variablesData = res.data.variables;
    //         this.variableOpen = true
    //       });
    //     }
    //   },
    /** 返回页面 */
    goBack() {
      // 关闭当前标签页并返回上个页面
      // const obj = { path: 'disciplinaryApplication', query: { t: Date.now() } }
      // this.$tab.closeOpenPage(obj)
      this.$router.back()
      // 关闭窗体 index 当前层索引
      this.$tab.closePage();
    },
    // 下载违纪材料
    async uploadFile() {
      const fileList = this.form.evidenceUpload // 假设这是文件ID列表或直接的URL列表

      if (fileList != null && fileList !== undefined && fileList !== '') {
        const files = fileList.split(',') // 分割字符串得到文件列表数组

        files.forEach(async (file) => {
          // 直接在files上使用forEach
          if (file != null && file !== '' && file !== undefined) {
            await downloadModule.resource(file)
          }
        })
      } else {
        return []
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.test-form {
  margin: 15px auto;
  width: 800px;
  padding: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.my-label {
  background: #e1f3d8;
}

.table-container {
  // display: table;
  width: 100%;
  margin: 0 auto;
}

.table-header,
.table-body {
  display: table-row;
}

.header-cell {
  display: table-cell;
  padding: 8px;
  font-weight: bold;
  text-align: center;
  background-color: #f5f7fa;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 8px;
  vertical-align: top;
  border-bottom: 1px solid #ddd;
}

.form-table {
  margin: 0;
}
</style>
